<template>
  <div class="ly-menu-item">
    <ly-sub-menu v-if="hasSub(itemObj)" :subObj="itemObj"></ly-sub-menu>
    <div v-else>
      <ly-svg-icon
        class="title-icon"
        v-if="itemObj.icon"
        :icon-class="itemObj.icon"
      ></ly-svg-icon
      >{{ itemObj.title }}
    </div>
  </div>
</template>
<script>
export default {
  name: "lyMenuItem",
  props: {
    itemObj: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    // console.log(this.itemObj,'itemObj')
  },
  methods: {
    hasSub(childItem) {
      return (
        childItem.children &&
        Array.isArray(childItem.children) &&
        childItem.children.length > 0
      );
    },
  },
};
</script>
<style lang="scss">
.ly-menu-item {
  &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
  padding: 7px 0 7px 20px;
  line-height: 56px;
  font-size: 14px;
  color: #303133;
  cursor: pointer;
  .title-icon {
    margin-right: 6px;
  }
}
</style>